<template>
  <div class="box">
    <headerdiv class="header" />
    <div class="pdf" v-show="fileType === 'pdf'">
      <p class="arrow">
        <span
          @click="changePdfPage(0)"
          class="turn"
          :class="{ grey: currentPage == 1 }"
          >Preview</span
        >
        {{ currentPage }} / {{ pageCount }}
        <span
          @click="changePdfPage(1)"
          class="turn"
          :class="{ grey: currentPage == pageCount }"
          >Next</span
        >
      </p>
      <pdf
        :src="src"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
      >
      </pdf>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  //   components: { pdf },
  name: "instructions",
  data() {
    return {
      currentPage: 1, // pdf文件页码
      pageCount: 5, // pdf文件总页数
      fileType: "pdf", // 文件类型
      src: "../../static/imgs/instructions/使用说明.pdf", // pdf文件地址
    };
  },
  created() {
    this.src = pdf.createLoadingTask(this.src);
  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
  },
  components: {
    pdf,
    headerdiv: () => import(/** */ "../components/header"),
  },
};
</script>
<style scoped>
.header {
  margin-bottom: 10px;
}
.arrow {
  cursor: pointer;
}
.pdf {
  width: 80vw;
  margin: 0 auto;
}
</style>